<template>
  <div class="user-pay-orders">
    <h2 class="page-title">我的订单</h2>
    <div class="orders-list">
      <el-card
          v-for="order in orders"
          :key="order.oid"
          class="order-card"
          shadow="hover"
      >
        <div class="order-info">
          <div class="order-item">
            <el-icon class="icon"><Document /></el-icon>
            <span class="label">订单号：</span>
            <span class="value">{{ order.oid }}</span>
          </div>
          <div class="order-item">
            <el-icon class="icon"><Collection /></el-icon>
            <span class="label">课程ID：</span>
            <span class="value">{{ order.cid }}</span>
          </div>
          <div class="order-item">
            <el-icon class="icon"><Reading /></el-icon>
            <span class="label">课程名称：</span>
            <span class="value">{{ order.cname }}</span>
          </div>
          <div class="order-item">
            <el-icon class="icon"><Money /></el-icon>
            <span class="label">总金额：</span>
            <span class="value">¥{{ order.total }}</span>
          </div>
          <div class="order-item">
            <el-icon class="icon"><Calendar /></el-icon>
            <span class="label">创建时间：</span>
            <span class="value">{{ order.createTime }}</span>
          </div>
          <div class="order-item">
            <el-icon class="icon"><Flag /></el-icon>
            <span class="label">订单状态：</span>
            <el-tag :type="order.status === '支付成功' ? 'success' : 'info'">
              <span>{{ order.status }}</span>
            </el-tag>
          </div>
        </div>
      </el-card>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue';
import axios from 'axios';
import { ElMessage } from 'element-plus';
import {
  Document,
  Collection,
  Reading,
  Money,
  Calendar,
  Flag,
} from '@element-plus/icons-vue';

// 订单列表
const orders = ref([]);

// 获取用户订单信息
const fetchOrders = async () => {
  const uid = localStorage.getItem('uid');
  if (!uid || uid === 'undefined') {
    ElMessage.error('未登录，请先登录');
    return;
  }
  try {
    const response = await axios.get(`http://localhost:8080/v1/user/order/select/${uid}`);
    orders.value = response.data.data;
  } catch (error) {
    console.error('获取订单信息失败：', error);
    ElMessage.error('获取订单信息失败');
  }
};

// 页面加载时获取订单信息
onMounted(() => {
  fetchOrders();
});
</script>

<style scoped>
.user-pay-orders {
  padding: 20px;
  background-color: #f5f7fa;
  min-height: 100vh;
}

.page-title {
  text-align: center;
  font-size: 24px;
  color: #303133;
  margin-bottom: 20px;
  font-weight: bold;
}

.orders-list {
  max-width: 800px;
  margin: 0 auto;
}

.order-card {
  margin-bottom: 20px;
  border-radius: 12px;
  background-color: #ffffff;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  transition: transform 0.2s, box-shadow 0.2s;
}

.order-card:hover {
  transform: translateY(-5px);
  box-shadow: #dddddd;
}

.label{
  font-size: 15px;
  font-weight: bold;
}

.value{
  font-size: 16px;
}

.order-item{
  margin-bottom: 8px;
}
</style>